import 'package:aero_frisbee/app/model/af_block_list_model/af_block_list_model.dart';
import 'package:aero_frisbee/gen/assets.gen.dart';
import 'package:aero_frisbee/pages/modues/message/pages/followed/view_model/af_followed_list_view_model.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AfBlockListScreen extends ConsumerStatefulWidget {
  const AfBlockListScreen({Key? key}) : super(key: key);
  @override
  AfBlockListScreenState createState() => AfBlockListScreenState();
}

class AfBlockListScreenState extends ConsumerState<AfBlockListScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            Navigator.of(context).maybePop();
          },
          child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(
                left: 20,
              ),
              child: Assets.icons.iconMineBack.image(width: 25),
            ),
          ),
        ),
        title: const Text(
          'Block List',
          style: TextStyle(
            color: Color(0xff404040),
            fontWeight: FontWeight.normal,
            fontSize: 16,
          ),
          textAlign: TextAlign.center,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
      ),
      body: ref.watch(getBlockListFutureProvider).maybeWhen(
            orElse: () => Container(),
            loading: () => const Center(child: CircularProgressIndicator()),
            data: (data) => _buildBody(data),
          ),
    );
  }

  _buildBody(List<AfBlockListModel> data) {
    return ListView.separated(
      padding: const EdgeInsets.only(top: 10),
      itemBuilder: (context, index) {
        return AfBlockListRowItem(
          item: data[index],
        );
      },
      separatorBuilder: (context, index) => const SizedBox(
        height: 0,
      ),
      itemCount: data.length,
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void didUpdateWidget(AfBlockListScreen oldWidget) {
    super.didUpdateWidget(oldWidget);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
  }
}

class AfBlockListRowItem extends ConsumerWidget {
  const AfBlockListRowItem({
    Key? key,
    required this.item,
    this.unBlockClick,
  }) : super(key: key);

  final AfBlockListModel item;
  final Function()? unBlockClick;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    ref.listen(unblockServiceProvider, (previousData, newData) {
      final isOk =
          newData.maybeWhen(ready: ((data) => data), orElse: () => false);
      if (isOk) {
        ref.invalidate(getBlockListFutureProvider);
      }
    });
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              children: [
                SizedBox(
                  height: 44,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(22),
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: CachedNetworkImage(
                        imageUrl: item.avatar ?? '',
                        fit: BoxFit.fill,
                        placeholder: (context, url) => const Material(
                          color: Color(0xffF2F5F9),
                          child: Center(
                            child: SizedBox(
                              width: 25,
                              height: 25,
                              child: CircularProgressIndicator(
                                strokeWidth: 2,
                                color: Color(0xffADADAD),
                                backgroundColor: Colors.white,
                              ),
                            ),
                          ),
                        ),
                        errorWidget: (context, url, error) =>
                            const CircularProgressIndicator(
                          strokeWidth: 2,
                          color: Color(0xffADADAD),
                          backgroundColor: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  width: 10,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        item.nickName ?? '',
                        style: const TextStyle(
                          color: Color(0xff000000),
                          fontWeight: FontWeight.normal,
                          fontSize: 16,
                        ),
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      ),
                      Text(
                        '${item.age} ${item.registerCountry}',
                        style: TextStyle(
                          color: const Color(0xff000000).withOpacity(0.4),
                          fontWeight: FontWeight.normal,
                          fontSize: 12,
                        ),
                        textAlign: TextAlign.left,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              ref
                  .read(unblockServiceProvider.notifier)
                  .unblock(broadcasterId: item.broadcasterId ?? '');
            },
            child: Container(
              decoration: BoxDecoration(
                color: const Color(0xff454545),
                borderRadius: BorderRadius.circular(36),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              child: const Text(
                'Unblock',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.normal,
                  fontSize: 14,
                ),
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
            ),
          )
        ],
      ),
    );
  }
}
